<template>
  <div class="personal">

    <div class="userinfo">
      <div class="headimgurl">
        <img :src="userinfo.headimgurl"
             alt="用户头像">
      </div>
      <div class="nickname">
        <span>{{userinfo.nickname}}</span>
      </div>
    </div>
    <div class="menu">
      <van-cell is-link
                to="userinfo">个人信息</van-cell>
      <van-cell is-link
                to="record">出入记录</van-cell>
    </div>
    <bottomTabbar />
  </div>
</template>

<script>
//引入底部组件
import bottomTabbar from '@/components/bottomTabbar'
export default {
  name: 'personal',
  //部件
  components: {
    bottomTabbar
  },
  data () {
    return {
      userinfo: {}
    }
  },
  created () {
    this.userinfo = JSON.parse(localStorage.getItem('userinfo'))
  },

}
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  .headimgurl {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .nickname {
    font-size: 18px;
  }
}
.menu {
  margin-top: 30px;
}
</style>
